import React, { Component, Fragment } from 'react';
import { Row, Col, Calendar, Statistic } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import st from '../Index.less';

@connect(({ problem }) => ({
  statistic: problem.calenderStatistic,
}))
class CalendarStatistic extends Component {
  constructor(props) {
    super(props);

    this.handleCalendarChange = this.handleCalendarChange.bind(this);
  }

  componentWillMount() {
    this.queryData();
  }

  //按日期查询
  queryData(day) {
    const { dispatch } = this.props;
    const params = day != null ? { day: day } : { day: null };

    dispatch({
      type: 'problem/fetchCalenderStatistic',
      payload: params,
    });
  }

  handleCalendarChange(value) {
    const day = value.format('YYYY/MM/DD');

    this.queryData(day);
  }

  render() {
    const { statistic } = this.props;
    return (
      <Fragment>
        <Row gutter={12}>
          <Col span={18}>
            <div className={st.calendar}>
              <Calendar
                validRange={[moment('20180101'), moment('20210101')]}
                fullscreen={false}
                onChange={this.handleCalendarChange}
              />
            </div>
          </Col>
          <Col span={6}>
            <div className={st.calendarStatistic}>
              <Statistic
              className={st.statistic}
                title={<span>周问题处理数</span>}
                value={statistic.week}
                valueStyle={{ color: '#FFA500' }}
              />
              <Statistic
              className={st.statistic}
                title={<span>月问题上报数</span>}
                value={statistic.month}
                valueStyle={{ color: '#FFA500' }}
              />
            </div>
          </Col>
        </Row>
      </Fragment>
    );
  }
}

export default CalendarStatistic;
